import React, { useState } from 'react';
import style from './index.module.css'; // 导入样式
import { Flex, Progress } from 'antd';

function Index({ TITLE, imgsData }) {

  // 状态钩子，存储当前显示的图片索引，初始值为0（显示第一张图片）
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  // 鼠标移动事件处理函数
  const handleMouseMove = (e: any) => {
    const imagesContainer = e.currentTarget; // 获取鼠标当前所在的容器
    const containerWidth = imagesContainer.clientWidth; // 获取容器的宽度
    const offsetX = e.clientX - imagesContainer.getBoundingClientRect().left; // 获取鼠标相对于容器的 X 坐标
    // 计算当前鼠标位置对应的图片索引
    const index = Math.floor((offsetX / containerWidth) * imgsData.length);
    // 更新当前图片索引，确保不超过数组长度
    setCurrentImageIndex(Math.min(index, imgsData.length - 1));
  };
  const progressPercent = ((currentImageIndex + 1) / imgsData.length) * 100;

  // 鼠标离开时回到第一张图片
  const handleMouseLeave = () => {
    setCurrentImageIndex(0);
  };

  return (
    <div className={style.box}>
      {/* 图片容器，绑定鼠标移动和鼠标离开事件 */}
      <div
        className={style.images}
        onMouseMove={handleMouseMove} // 当鼠标移动到容器内时调用 handleMouseMove
        onMouseLeave={handleMouseLeave} // 当鼠标离开容器时调用 handleMouseLeave
      >
        {imgsData.map((item, index) => (
          <img
            key={index} // 使用索引作为键
            src={item.img} // 图片路径
            alt="" // 图片的替代文本
            className={style.imgs} // 应用样式类
            // 根据当前索引决定是否显示该图片
            style={{ display: index === currentImageIndex ? 'block' : 'none' }}
          />
        ))}
      </div>
      <div className={style.jinDu}>
        <Flex gap="small" vertical>
          <Progress percent={progressPercent} />
        </Flex>
      </div>
      <div className={style.jinDu1}></div>
      <div className={style.Title}>{TITLE}</div>
    </div>
  );
}

export default Index; // 导出组件
